<template>
	<div>
		<div class="goods">
			<div class="menu-wrapper" ref="menuWrapper">
				<!--食物列表-->
				<ul>
					<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index)">
						<span>
              		{{item.name}}
              </span>
					</li>
				</ul>
			</div>

			<div class="foods-wrapper" ref="foodWrapper" style="flex: 1;overflow:hidden;">
				<ul>
					<li v-for="(item) in goods" class="food-list-hook">
						<h5 class="food-name">{{item.name}}</h5>
						<ul>
							<li v-for="(food,index) in item.foods"  @click="InDetail(food)">
								<div class="menu-food" style="display: flex;">
									<div class="food_icon" style="width: 60px;">
										<img :src="food.icon" width="57" height="57" />
									</div>
									<div style="flex: 1;">
										<div style="font-size: 14px;color:rgb(7,17,27);position: relative;">
											{{food.name}}
											<div style="position: absolute;top: -2px;right: 0;">
												<cartcount :food="food" ></cartcount>
											</div>
										</div>
										<p v-show="food.description" style="font-size: 10px;padding: 8px 0 0;color: rgb(147,153,159);line-height: 12px;">{{food.description}}</p>
										<p style="font-size: 12px;padding:8px 0;color: rgb(147,153,159);">月售{{food.sellCount}}份<span style="padding-left: 5px;">好评率:{{food.rating}}%</span></p>
										<span style="font-size: 14px;font-weight: 600;color: rgba(248,12,66,0.9);">￥{{food.price}}</span><span class="old" v-show='food.oldPrice' style="font-size: 12px;">￥{{food.oldPrice}}</span>
									</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
				<shopcat :food="sellectFoods" :minPrice="sellerList.minPrice"></shopcat>
			
			</div>
		</div>

	</div>
</template>

<script type="text/ecmascript-6">
	import Vue from 'vue';
	import BScroll from 'better-scroll'; // 使用better-scrol实现滑动
	import shopcat from '../shopcat/shopcat';
	import cartcount from '../cartcount/cartcount';

	export default {
		data() {
			return {
				goods: [],
				listHight: [],
				scrollY: 0,
				sellerList: []
			};
		},
		created() {
			this.$store.dispatch('getSellerJson').then(() => {
				this.sellerList = this.$store.state.sellerList
			})
			this.getGood()
		},
		methods: {
			InDetail(food){
				this.$router.replace({path:'/detail',query: food})
			},
			getGood() {
				this.$axios.get('http://localhost:8081/api/goods').then(res => {
					this.goods = res.data.data;
					console.log(this.goods)
					//					console.log(this.sellerList)
					this.$nextTick(() => { //DOM每次修改数据更新
						this._initScroll();
						this._calculateHeight();
					});
				});
			},
			//请求数据
			_initScroll() {

				//this.$refs：取得DOM对象
				this.menuScroll = new BScroll(this.$refs.menuWrapper, {
					click: true //结合BScroll的接口使用,是否将click事件传递,默认被拦截了
				})
				this.foodScroll = new BScroll(this.$refs.foodWrapper, {
					probeType: 3, //结合BScroll的接口使用,3实时派发scroll事件，探针的作用
					click: true
				})
				this.foodScroll.on('scroll', (pos) => { //左右联动
					this.scrollY = Math.abs(Math.round(pos.y));
				})
			},
			selectMenu(index) {
				let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
				let el = foodList[index]
				this.foodScroll.scrollToElement(el, 300); //滚动展示
			},
			_calculateHeight() { //获取食物高度
				let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
				let height = 0;
				this.listHight.push(height)
				for(var i = 0; i < foodList.length; i++) {
					let item = foodList[i]; //获取食物每个li
					height += item.clientHeight
					this.listHight.push(height)

				}
			},
			getChild(v){
				console.log(v)
			}

		},
		computed: {
			//左边的食物判断右边的列表滚动
			currentIndex() { //点击样式添加
				for(let i = 0; i < this.listHight.length; i++) {
					let height1 = this.listHight[i];
					let height2 = this.listHight[i + 1]; //listHeight[length]返回undefined,所以可以用!height2做判断不是最后一个
					if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
						return i;
					}
				}
				return 0;
			},
			sellectFoods() {
				//有被选数量的食物才被传入购物车组件
				var foods = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if(food.count) {
							foods.push(food)
						} else {
							return
						}
					})
				})
				return foods
			}
		},
		components: {
			shopcat,
			cartcount
		}
	};
</script>

<style scoped>
	.goods {
		position: absolute;
		top: 181px;
		left: 0;
		bottom: 46px;
		display: flex;
		overflow: hidden;
		max-height: 100%;
		width: 100%;
	}
	
	.menu-wrapper {
		flex: 0 0 80px;
		width: 80px;
		background: #f3f5f7;
	}
	
	.menu-item {
		display: table;
		height: 54px;
		width: 56px;
		padding: 0 12px;
		line-height: 28px;
		text-align: center;
	}
	
	.current {
		position: relative;
		z-index: 10;
		margin-top: -1px;
		background: #fff;
		font-weight: 700;
	}
	
	.menu-item span {
		border-bottom: 1px solid rgb(7, 17, 27, .1);
		font-size: 12px;
		line-height: 14px;
		color: rgb(61, 54, 54);
		display: table-cell;
		vertical-align: middle;
	}
	
	.menu-name {
		flex: 1;
	}
	/*右边食物*/
	
	.food-name {
		width: 100%;
		background: #F3F5F7;
		border-left: 3px solid #d9dde1;
		font-size: 12px;
		line-height: 26px;
		padding-left: 14px;
		color: rgb(147, 153, 159);
	}
	
	.menu-food {
		padding: 18px 0;
		margin: 0 18px;
		border-bottom: 1px solid rgb(7, 17, 27, 0.1);
	}
</style>